<template>
	<view class="key-input">
		<view class="title">输入验证码</view>
		<view class="tips">验证码已发送至 {{form.account}}</view>
		<u-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine" :maxlength="maxlength"></u-message-input>
		<text :class="{ error: codeErr }">验证码错误，请重新输入</text>
		<!-- <view class="captcha u-text-center">
			<text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
			<text :class="{ regain: !show }">{{ seconds }}</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			form:{},
			seconds:0,
			codeErr: false
		},
		data() {
			return {
				maxlength: 4,
				value: '12',
				show: false
			}
		},
		watch: {
			codeErr(val){
				if(val){
					this.value = ''
				}
			}
		},
		methods: {
			// 输入完验证码最后一位执行
			finish(value) {
				this.$emit('finish',value)
				// console.log('finish', value);
				// this.form.mobilecaptcha = value
				// this.submit()
			},
			change(){
				
			}
		}
	}
</script>

<style lang="scss">
	// 输入验证码
	.key-input {
		padding: 60rpx;
		text {
			display: none;
		}
		.error {
			display: block;
			color: red;
			font-size: 30rpx;
			margin: 20rpx 0;
		}
		.title {
			font-size: 50rpx;
			color: #333;
		}
		
		.tips {
			font-size: 30rpx;
			color: #333;
			margin-top: 20rpx;
			margin-bottom: 60rpx;
		}
		.captcha {
			color: $u-type-warning;
			font-size: 30rpx;
			margin-top: 40rpx;
			.noCaptcha {
				display: block;
			}
			.regain {
				display: block;
			}
		}
	}
</style>
